<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<style type="text/css"> text-align:center; color: white; </style> 
	<title> weDJ </title>

	<link rel="stylesheet" href="home.css" type="text/css" />
    	<meta http-equiv="X-UA-Compatible" content="chrome=1"> 
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

</head>

<script type="text/javascript">
function addSong(song, artist){
document.getElementById(playlist).innerHTML = song + "  " + "artist";
}
</script>

<body id="index" class="home">

<header id="banner" class="body">
	<h1><a href="#"> weDJ </a></h1>
	<h2> Create and share playlists! </h2>

	<nav><ul>
		<li><a id="home" href="home.html">Home</a></li>
		<li class="active"><a id="create" href="#">Create A Party Playlist</a></li>
		<li><a  id="join" href="#">Join A Party</a></li>
	</ul></nav>

	<title>Create a Playlist :: WeDJ</title>
        <link href='http://fonts.googleapis.com/css?family=Pompiere&v2' rel='stylesheet' type='text/css'>
	<style> 
     
        
        #form {
            list-style-type: none;
            list-style-position: outside;
            margin-left: 0;
            padding-left: 20px;
        }
	#banner nav #create:hover, #banner nav a:active,
	#banner nav .active a:link, #banner nav .active a:visited {
	background: orange;
	color: #fff;
	text-shadow: none !important;
	}

        
        li { margin-bottom: 1em; padding-left:-100px;}
        ::-webkit-validation-bubble { opacity: 1; }
		::-webkit-validation-bubble-arrow-clipper {}
		::-webkit-validation-bubble-arrow {
			background-color: #666;
			border: 1px solid #333;
			border-width: 1px 0 0 1px;
			-webkit-box-shadow: none;

            
		}
		::-webkit-validation-bubble-message {
			background: -webkit-linear-gradient(#666,#777);
			border: 1px solid #333;
			color: #222;
			font-size: 140%;
			-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.333);
			text-shadow: 0 1px #888, 0 -1px #555;
		}

        fieldset{
            margin-top:50px;
	    margin-bottom: 50px;
            border-radius: 8px;
            border: 0px solid transparent;
            box-shadow: 0 0 10px #999;
	    backgroun-color: white;
	    font-family: 'Pompiere', cursive;
	    /*font-family: "Lucida Grande", "Segoe UI";*/
            font-size: 22px;
	    /*background-image: url("random_grey_variations.png");*/
			text-align: left;
            margin: 0 auto;
        }

        input{
            
            font-size:15px;
        }

        .awesomeAddButton{
           
    background: #000 url(overlay.png) repeat-x;
    border: 0px solid transparent;
    display: inline-block;
    font-size:18px;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    
    position: relative;
    cursor: pointer;
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        

        }

         .awesomeAddButton:hover{
           
    background: #c74350 url(overlay.png) repeat-x;
    box-shadow: 0 0 6px #999;

        }

        #playlist{
            font-size: 16px;
            line-height: 4px;
        }

        </style> 

</header>

<div id="playlist"></div>

<div id="content">
	<form style="margin: 0 auto; width: 40%" name="addSongForm"> 

	<fieldset id="fieldset">
        <ul id="form"> 
            
             
            <li> 
                <label for="name">Artist:</label> 
                <input id="artistName" name="artistName" required placeholder="Your favorite artist/band" type="text"> 
            </li> 
            
            <li> 
                <label for="name">Song Title:</label> 
                <input id="songTitle" name="songTitle" required placeholder="Your favorite song" type="text"> 
            </li> 
            <li>(Song with the matching song info will be added to the playlist.)</li>
            <button class="awesomeAddButton" onClick="addSong(document.addSongForm.songTitle. value, document.addSongForm.artistName.value)">Add Song</button>
            </li>
        </ul> 
	
	</fieldset> 
	</form> 
</div>
</body>
</html>